 <div id="contentbgc" style="height:550px">
    <div id="productmenu">
      <ul>
      <?php foreach($categories as $category):?>
        <li><a href="<?php echo site_url('category/'. $category->id);?>"><?php echo $category->name?></a></li>
      <?php endforeach;?>
      </ul>
    </div>
<!-- 425 Updated -->
<script type="text/javascript"> 
$(document).ready(function(){

	$("#productmenu ul li").hover(function(){
		var index = $("#productmenu ul li").index(this);
		$("#productphoto img").css({"display":"none"}).eq(index).css({"display":"block"});
		$("#productmenu ul li").eq(index).addClass("current");
	},function(){
		var index = $("#productmenu ul li").index(this);
		$("#productmenu ul li").eq(index).removeClass("current");
	})

});	
</script> 
    <div id="productphoto" style="margin-top:40px;margin-left:330px;width:293px;height:437px;overflow:hidden;">
		<?php foreach($categories as $key => $category2):?>
		<img src="<?php echo image_url('home/product'. $category2->id. '.jpg');?>" style="display:<?php if(0 == $key):?>block<?php else:?>none<?php endif;?>;" />
		<?php endforeach;?>
	</div>
<!-- End of 425 -->
  </div>